<template>
  <div class="index-notice">
    <div id="notice">
      <div class="container">
        <div class="egg">
          <div>
            <img src="../assets/img/xlaba.png" alt="" />
            <div>
              <template>
                <swiper
                v-if="data"
                  ref="swiper"
                  @mouseover.native="stopSwiper"
                  @mouseout.native="startSwiper"
                  :options="swiperOption"
                >
                  <swiper-slide v-for="n in data" :key="n.nid">
                    <router-link to="*">
                      <span>
                        {{n.title}}</span
                      >
                      <span>{{moment.unix(n.publicTime/1000).format('YYYY年MM月DD日 HH:mm:ss')}}</span>
                    </router-link>
                  </swiper-slide>
                </swiper>
              </template>
            </div>
          </div>
          <div>
            <router-link to="*">
              <span>更多记录</span>
              <img src="../assets/img/xiaojt.png" alt="" />
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
// import "swiper/css/swiper.css";
export default {
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      var url = "http://127.0.0.1:3000/v1/pro/notice";
      this.axios.get(url).then((res) => {
        console.log("公告数据", res);
        this.data = res.data;
      });
    },
    stopSwiper() {
      console.log("$refs:", this.$refs);
      this.$refs.swiper.$swiper.autoplay.stop();
    },
    startSwiper() {
      console.log("$refs:", this.$refs);
      this.$refs.swiper.$swiper.autoplay.start();
    },
  },
  name: "swiper-example-vertical",
  title: "Vertical slider",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      data: null, //接收响应的数据
      swiperOption: {
        direction: "vertical",
        loop: true,
        autoplay: {
          delay: 4000,
          disableOnInteraction: false,
        },
      },
    };
  },
};
</script>
<style scoped src="../assets/css/index.css"></style>
<style lang="scss">
.egg > div:first-child > div[data-v-052d4f4a] {
  margin-bottom: -8px;
}
</style>
